<template>
	<div>
		<ul>
			<li v-for="m in messages" :key="m.id">
				<!-- to的对象写法（美观，可读性强），传递params参数 -->
				<router-link 
					:to="{
						name:'xiangqing',
						query:{
							id:m.id, //消息编号
							title:m.title, //消息标题
							content:m.content //消息内容
						}
					}"
				>
					{{m.title}}
				</router-link>
				<button @click="showXiaoxi(m)">push查看消息</button>
				<button @click="showXiaoxi2(m)">replace查看消息</button>
			</li>
		</ul>
		<hr>
		<!-- 指定路由组件的展示位置 -->
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messages:[
					{id:'001',title:'消息001',content:'加油！中国！'},
					{id:'002',title:'消息002',content:'0415，高薪就业！'},
					{id:'003',title:'消息003',content:'接下来的项目，加油！'}
				]
			}
		},
		methods:{
			showXiaoxi(m){
				//编写一段代码，引起路由跳转到详情
				this.$router.push({
					name:'xiangqing',
					query:{
						id:m.id, //消息编号
						title:m.title, //消息标题
						content:m.content //消息内容
					}
				})
			},
			showXiaoxi2(m){
				//编写一段代码，引起路由跳转到详情
				this.$router.replace({
					name:'xiangqing',
					query:{
						id:m.id, //消息编号
						title:m.title, //消息标题
						content:m.content //消息内容
					}
				})
			}
		}
	}
</script>
